<template>
  <el-dialog
    :title="title"
    class="editorder"
    :visible.sync="isDial"
    width="800px"
    :before-close="closeDialog"
  >
    <el-form :model="form" size="mini" :rules="rules" ref="editO">
      <div class="row">
          <el-form-item label="临时地址" prop="sourceAddress" :label-width="formLabelWidth">
            <el-input v-model="form.sourceAddress" style="width:100%" :maxlength="200" autocomplete="off" size="mini" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="小区名称" prop="housesName" :label-width="formLabelWidth">
           <el-autocomplete size="mini" style="width:180px;" :disabled="form.status>=3" :maxlength='10' class="leftBorder inline-input" v-model="form.housesName" :fetch-suggestions="querySearch" placeholder="小区名称" :trigger-on-focus="false" @select="handleSelect" ></el-autocomplete>
            <el-cascader size="mini" style="margin-left: 10px;"
              expand-trigger="hover"
              :options="pedestal"
              v-model="form.pedestal" :disabled="form.status>=3" @change="selectRoom">
            </el-cascader>
        </el-form-item>
        <div class="column">
            <el-form-item label="户型" prop="housesType" :label-width="formLabelWidth">
                <el-select v-model="form.housesType[0]" class="leftBorder" style="width:70px" placeholder=" " size="mini">
                    <el-option :label="item" v-for="item in 9" :value="item"></el-option>
                </el-select> 室
                <el-select v-model="form.housesType[1]" class="leftBorder" style="width:70px" placeholder=" " size="mini">
                    <el-option :label="item-1" v-for="(item,index) in 10" :value="item-1"></el-option>
                </el-select> 厅
                <el-select v-model="form.housesType[2]" class="leftBorder" style="width:70px" placeholder=" " size="mini">
                    <el-option :label="item-1" v-for="(item,index) in 10" :value="item-1"></el-option>
                </el-select> 卫
                <el-select v-model="form.housesType[3]" class="leftBorder" style="width:70px" placeholder=" " size="mini">
                    <el-option :label="item-1" v-for="(item,index) in 10" :value="item-1"></el-option>
                </el-select> 阳
            </el-form-item>
            <el-form-item label="建筑面积" prop="bulidArea" :label-width="formLabelWidth">
               <el-input v-model="form.bulidArea" :maxlength="10" class="leftBorder" placeholder="平米" autocomplete="off" size="mini" ></el-input>
            </el-form-item>
        </div>
        <div class="column">
            <el-form-item label="房屋类型" prop="housesClass" :label-width="formLabelWidth">
                <el-select v-model="form.housesClass" class="leftBorder" placeholder=" " size="mini">
                   <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
             </el-form-item>
             <el-form-item label="交付状况" prop="deliveryStatus" :label-width="formLabelWidth">
                <el-select v-model="form.deliveryStatus" class="leftBorder" placeholder=" " size="mini">
                    <el-option label="精装" value="1"></el-option>
                    <el-option label="毛坯" value="0"></el-option>
                </el-select>
             </el-form-item>
        </div>
      </div>
      <div class="row">
        <div class="column">
            <el-form-item label="业主姓名" prop="customer" :label-width="formLabelWidth">
               <el-input v-model="form.customer" :maxlength="10" class="leftBorder" autocomplete="off" size="mini" ></el-input>
            </el-form-item>
        </div>
        <div class="column" style="width:35%">
            <el-form-item label="业主手机" prop="phone" :label-width="formLabelWidth">
                <el-input v-model="form.phone" :maxlength="11" class="leftBorder" autocomplete="off" size="mini" ></el-input>
             </el-form-item>
        </div>
        <el-form-item label="收房时间" style="clear: both;" prop="getHomeDate" :label-width="formLabelWidth">
            <el-date-picker v-model="form.getHomeDate" :disabled="form.status>=3" :picker-options="pickerOptions0" style="width:180px;" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"></el-date-picker>
            <el-select v-model="form.getHomeTime" :disabled="form.status>=3" style="width:80px;margin-left: 10px;" size="mini">
                <el-option label="上午" value="1"></el-option>
                <el-option label="下午" value="2"></el-option>
                <el-option label="全天" value="0"></el-option>
            </el-select><span style="margin-left: 10px;color:#97A8BE">如果业主不能确定收房日期则为空</span>
        </el-form-item>
        <el-form-item label="信息备注" prop="remark" :label-width="formLabelWidth">
            <el-input v-model="form.remark" style="width:100%" :maxlength="200" autocomplete="off" clearable size="mini" ></el-input>
            <span style="margin-right:10px;cursor: pointer;" @click="setRemark">手机号错误</span>
            <span style="margin-right:10px;cursor: pointer;"  @click="setRemark">电话无人接</span>
            <span style="margin-right:10px;cursor: pointer;"  @click="setRemark">电话打不通</span>
            <span style="margin-right:10px;cursor: pointer;"  @click="setRemark">收房日期不能确定</span>
            <span style="margin-right:10px;cursor: pointer;"  @click="setRemark">顶楼有赠送</span>
            <span style="margin-right:10px;cursor: pointer;"  @click="setRemark">有地下室</span>
        </el-form-item>
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer" v-if="form.status<=3">
      <el-button size="mini" type="primary" @click="editOrder">保 存</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { request } from "../../assets/request.js";
let info = {
    remark:'备注备注', //备注
    housesType :['1','1','1','1'], //户型
    customer:'张三', //业主姓名
    phone:'15268095284', //业主手机号
    orderNo:'0211', //订单号
    payAmount:'199', //订单价格
    orderTime:'2019-01-10', //交易时间
    bulidArea:'120', //面积
    deliveryStatus:'1', //交付状况
    housesName:'', //小区名称
    housesClass:'1', //房屋类型
    source:'1', //来源
    getHomeDate:'2019-01-10', //收房时间
    getHomeTime:'0', //上午下午
    pedestal:[], //栋座
};
export default {
  data() {
    return {
      isDial: false,
      form: info,
      rules: {
        customer: [{pattern: /^[\s\S]*.*[^\s][\s\S]*$/,required: true,message: "业主姓名是必填项",trigger: "blur"}],
        phone: [{pattern: /^1[3|4|5|6|7|8|9][0-9]{9}$/g,required: true,message: "请输入正确的手机号",trigger: "blur"}],
        deliveryStatus:[{pattern: /^[\s\S]*.*[^\s][\s\S]*$/,required: true,message: "交付状况是必选项",trigger: "blur"}],
        housesClass:[{pattern: /^[\s\S]*.*[^\s][\s\S]*$/,required: true,message: "房屋类型是必选项",trigger: "blur"}],
        bulidArea:[{pattern: /^-?\d+$/,required: true,message: "面积只能是整数",trigger: "blur"}],
        hosesName:[{pattern: /^[\s\S]*.*[^\s][\s\S]*$/,required: true,message: "小区名称是必填项",trigger: "blur"}],
      },
      formLabelWidth: "80px",
      title: "编辑订单",
      id: "",
    options: this.$store.state.options,
    property:[], //全部小区
    pedestal:[], //楼栋 单元房 号集合
    pickerOptions0: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;
          }
        },
    };
  },
  created() {
    let that = this;
    this.$root.$on("editOrder", data => {
      // console.log(data)
      this.isDial = true;
      this.property=this.$store.state.property
      if(data.housesId){ //判断是否选择楼盘
          that.handleSelect({id:data.housesId,roomId:data.housesNumberId}) //联动选折器 值
      }
      this.selectInfo(data.id)
    });
  },
  methods: {
    editOrder() { //保存
      let that = this;
      this.$refs.editO.validate(valid => {
        if(!valid){
            return
        }
        let form =that.form
        // console.log(form)
        if(form.status>=2 && !form.getHomeDate){
            this.$message({
              message: "此订单状态收房时间为必选项",
              type: "warning"
            });
            return
        }
        let pedestal=that.pedestal
        if(form.pedestal[0] && form.pedestal[1] && form.pedestal[2]){ //判断房号是否有选中
            for(let i in pedestal){
                for(let j in pedestal[i].children){
                    for(let k in pedestal[i].children[j].children){
                        if(pedestal[i].children[j].children[k].value==form.pedestal[2]){
                            form.housesId=pedestal[i].housesId
                            form.housesNumberId =form.pedestal[2]
                            form.housesUnitId =pedestal[i].children[j].id
                            form.housesUnitName =form.pedestal[0]
                            form.fullName=pedestal[i].label+pedestal[i].children[j].label+pedestal[i].children[j].children[k].label
                        }
                    }
                }
            }
        }else{
          that.$message({
            type: "warning",
            message: "房号是必选项"
          });
          return
        }
        let params={  //为什么不能 params=form  这样当改变params时   就会改变form的值   我们不希望改变form的值  为什么不用循环  是因为编辑查询出来的信息很多编辑是用不到的
            adminId: form.adminId,
            bulidArea: form.bulidArea,
            customer: form.customer,
            deliveryStatus: form.deliveryStatus,
            getHomeDate: form.getHomeDate,
            getHomeTime: form.getHomeTime,
            housesClass: form.housesClass,
            housesId: form.housesId,
            housesName: form.housesName,
            housesNumberId: form.housesNumberId,
            housesUnitId: form.housesUnitId,
            housesUnitName: form.housesUnitName,
            id: form.id,
            orderNo: form.orderNo,
            payAmount:form.payAmount,
            phone: form.phone,
            remark: form.remark,
            serviceTime: form.serviceTime,
            fullName:form.fullName
        }
        params.getHomeTime=params.getHomeTime=='' || null== params.getHomeTime?'0':params.getHomeTime
        params.housesClass=params.housesClass=='平层'?'1':params.housesClass=='LOFT'?'2':params.housesClass=='复式'?'3':params.housesClass=='排屋'?'4':params.housesClass=='别墅'?'5':params.housesClass
        if(typeof(form.housesType)=='object'){
            params.housesType=form.housesType.join('-')
        }
        let url='order'
        request.ajaxPost({
            url,
            that,
            type:'PUT',
            params,
            fn(res) {
                that.isDial = false;
                console.log(res)
                that.resetForm();
                that.$root.$emit("searchOrder",'no')
            }
        });
      });
    },
    selectInfo(id){ //请求详情
      let that=this
      let url = "order/"+id;
      request.ajaxGet({
            url,
            that,
            fn(res){
                res.deliveryStatus=''+res.deliveryStatus
                if(res.housesType){
                    res.housesType=res.housesType.split('-')
                }else{
                     res.housesType=['1','1','1','1']
                }
                if(res.housesId){ //判断  是选择楼盘
                    res.pedestal=[]
                    res.pedestal.push(res.housesUnitName)
                    res.pedestal.push(res.housesUnitId)
                    res.pedestal.push(res.housesNumberId)
                }
                if(res.houseNumberAddress || res.sourceAddress){ //判断 两地址是否有 空串
                  res.houseNumberAddress=res.houseNumberAddress==null?'':res.houseNumberAddress+' # '
                  res.sourceAddress=res.sourceAddress==null?'':res.sourceAddress
                  res.sourceAddress=res.houseNumberAddress+res.sourceAddress
                }
                that.form=res
            }
        })
    },
    resetForm() {
      //清空记录
      this.$refs["editO"].resetFields();
    },
    closeDialog() {
      this.isDial = false;
      this.resetForm();
    },
    setRemark(e){ //设置备注
        let form= this.form
        if(form.remark){
            form.remark+='、'+e.target.innerText
        }else{
            form.remark=e.target.innerText
        }
    },
    querySearch(queryString, cb) {
      var restaurants = this.property;
      var len = restaurants.length;
      var arr = [];
      for(var i=0;i<len;i++){
          //如果字符串中不包含目标字符会返回-1
          if(restaurants[i].value.indexOf(queryString)>=0){
              arr.push(restaurants[i]);
          }
      }
      cb(arr);
    },
    handleSelect(item) { //选中小区名称
      let url = "houses/unit/all";
      let that=this   //解决this指向问题
      let obj={
          housesId:item.id
      }
      let form=this.form
      form.pedestal=[]
      request.ajaxGet({
        url,
        that,
        params:obj,
        fn(res){
          for(let i in res){
              for(let j in res[i].children){
                  res[i].children[j].label=res[i].children[j].label+'单元'
              }
          }
          let pedestal=[]
          for(let i in res){  //选定的房号的数组
            for(let j in res[i].children){
              for(let k in res[i].children[j].children){
                if(item.roomId==res[i].children[j].children[k].id){
                  pedestal.push(res[i].value)
                  pedestal.push(res[i].children[j].value)
                  pedestal.push(res[i].children[j].children[k].value)
                }
              }
            }
          }
          let form=that.form
          form.pedestal=pedestal
          that.pedestal=res
        }
      })
    },
    selectRoom(val){ //选中房号
        let url='houses/number/'+val[2]
        let that=this   //解决this指向问题
        // console.log(val[2])
        request.ajaxGet({
            url,
            that,   
            fn(res){
                // console.log(res)
                let form =that.form
                if(res){
                    form.bulidArea=res.builtArea;
                    form.housesClass=res.type;
                    form.deliveryStatus=''+res.deliveryStatus;
                    form.housesType=res.houseType.split('-');
                }
            }
        })
    }
  },
  
};
</script>
<style lang="less" scoped>
.editorder {
  text-align: left;
  .row{
      width: 100%;
      border-bottom: 1px solid #eeeeee;
      padding-top: 20px;
      overflow: hidden;
      .column {
                width: 65%;
                float: left;
            .el-select {
                width: 180px;
            }
            .el-input {
                width: 180px;
            }
        }
        .column:last-child{
            width: 35%
        }
  }
  .row:last-child {
    padding-top: 10px;
    border-bottom: 0px;
  }
  
}
</style>
